import React from 'react';
import classNames from 'classnames';
import { Card, Anchor, Content } from 'react-fule-ui';

export default function FuleAnchor(props) {
  const path = props.match.path;
  const urlPath = `${props.location.pathname}${props.location.search}`;
  return (
    <Content>
      <Content.Header ceiling>锚点</Content.Header>
      <Content.Body>
        <Anchor ceiling>
          <Anchor.Item
            cid={`${path}?1`}
            index="1"
            path={path}
            urlPath={urlPath}
          >
            11
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?2`}
            index="2"
            path={path}
            urlPath={urlPath}
          >
            22
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?3`}
            index="3"
            path={path}
            urlPath={urlPath}
          >
            33
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?4`}
            index="4"
            path={path}
            urlPath={urlPath}
          >
            44
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?5`}
            index="5"
            path={path}
            urlPath={urlPath}
          >
            55
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?6`}
            index="6"
            path={path}
            urlPath={urlPath}
          >
            66
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?7`}
            index="7"
            path={path}
            urlPath={urlPath}
          >
            77
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?8`}
            index="8"
            path={path}
            urlPath={urlPath}
          >
            88
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?9`}
            index="9"
            path={path}
            urlPath={urlPath}
          >
            99
          </Anchor.Item>
        </Anchor>
        <Anchor>
          <Anchor.Item
            cid={`${path}?1`}
            index="1"
            path={path}
            urlPath={urlPath}
          >
            11
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?2`}
            index="2"
            path={path}
            urlPath={urlPath}
          >
            22
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?3`}
            index="3"
            path={path}
            urlPath={urlPath}
          >
            33
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?4`}
            index="4"
            path={path}
            urlPath={urlPath}
          >
            44
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?5`}
            index="5"
            path={path}
            urlPath={urlPath}
          >
            55
          </Anchor.Item>
          <Anchor.Item
            cid={`${path}?6`}
            index="6"
            path={path}
            urlPath={urlPath}
          >
            66
          </Anchor.Item>
        </Anchor>
        <Card
          id={`${path}?1`}
          className={classNames(
            'utility-h3',
            `${path}?1` === urlPath || path === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>11</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?2`}
          className={classNames(
            'utility-h3',
            `${path}?2` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>22</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?3`}
          className={classNames(
            'utility-h3',
            `${path}?3` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>33</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?4`}
          className={classNames(
            'utility-h3',
            `${path}?4` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>44</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?5`}
          className={classNames(
            'utility-h3',
            `${path}?5` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>55</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?6`}
          className={classNames(
            'utility-h3',
            `${path}?6` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>66</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?7`}
          className={classNames(
            'utility-h3',
            `${path}?7` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>77</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?8`}
          className={classNames(
            'utility-h3',
            `${path}?8` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>88</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
        <Card
          id={`${path}?9`}
          className={classNames(
            'utility-h3',
            `${path}?9` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>99</Card.Header>
          <Card.Body>body</Card.Body>
          <Card.Foot>底部</Card.Foot>
        </Card>
      </Content.Body>
    </Content>
  );
}
